<template>
	<view>
		<view class="cu-item cur">
			<view class="dish_image">
				<image @click="clickImg(htp + details.itemImg)" :src=" htp + details.itemImg" mode=""></image>
			</view>
			<view class="solids-bottom padding-xs flex align-center">
				<view class="flex-sub">
					<view class="text-xxl padding_box"><text class=" text-black">{{details.itemName}}</text></view>
					<view class="padding_box text-price text-red">{{details.itemPrice}}</view>
				</view>
			</view>
			<!-- 商家信息 -->
			<view class="cu-bar bg-white">
				<view class="action">
					<text class="cuIcon-title text-green"></text>
					<text>商家信息</text>
				</view>
			</view>
			<view class="padding-xs flex align-center">
				<view class="flex-sub">
					<view class="solid-bottom text-df padding">{{ minute }}</view>
				</view>
			</view>
			<!--使用规则  -->
			<view class="cu-bar bg-white">
				<view class="action">
					<text class="cuIcon-title text-green"></text>
					<text>使用规则</text>
				</view>
			</view>
			<view class="padding-xs flex align-center">
				<view class="flex-sub">
					<view class="solid-bottom padding">{{ scripts }}</view>
				</view>
			</view>
		</view>
		<view>
			<view class="action_add action action_btn" v-if="addto == true">
				<button class="cutn round bg-green shadow add" @tap="addShoppings(details.itemType,details.itemPrice,details.itemName,details.itemRange)">加入购物车</button>
			</view>
			<view class="action_number" v-if="addto == false" v-for="(item,index) in SinglePoint" :key="index">
				<button class="bg_border cu-btn  lg textbtn add" @tap="Less(index,item.foodIds,item.ids,item.timeType,item.primaryMoney,item.mealName,details.itemRange,1)">-</button>
				<view class="action_text">
					<text>{{ item.number }}</text>
				</view>
				<button class="bg-green cu-btn  lg textbtn add" @tap="Less(index,item.foodIds,item.ids,item.timeType,item.primaryMoney,item.mealName,details.itemRange,2)">+</button>
			</view>
		</view>
		<view class="cu-modal" :class="modalNames=='DialogModal1'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">提示</view>
					<view class="action" @tap="cancel">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					您还没有登录，请先登录在下单
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn bg-green margin-left" @tap="determine">点击登录</button>

					</view>
				</view>
			</view>
		</view>
		<view class="cart">
			<view class="cu-tag badge">{{ dishesLens }}</view>
			<image @tap="showModal" data-target="bottomModal" id="cart" :src="srcImage" mode="widthFix"></image>
			<view class="text-price text-white fontText">{{ totalPrice }}</view>
			<button class="cartBtn" @tap="submits">跳转至下单</button>
		</view>
	</view>
</template>
<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				itemRange:'',
				remaining_quantity: '', //剩余数量
				isClick: true,
				modalNames: null,
				state: null,
				primaryMoney: null,
				timeType: null,
				mealName: null,
				price: 0, //查询购物车中的价格
				quantity: 0, //查询购物车中的数量
				SinglePoint: null, //购物车查询出的页面信息
				ShoppingCartInformation: null, //查询的购物车信息
				addto: true,
				foodId: null,
				consult: null,
				details: null, //详细信息
				xinxi: null, //信息
				modalName: null,
				id: null,
				minute: '山东同缘生物科技有限公司',
				scripts: '无需预约，消费高峰期可能需要等待酒水饮料问题请致电商家咨询以商家反馈为',
				srcImage: "cloud://shiheji-5gkjlvup36de14c2.7368-shiheji-5gkjlvup36de14c2-1304241660/image/cart.png"
			};
		},
		onShow() {
			this.shoppingcatData()
			this.selectShoppingCat()
			this.lists();
			if (this.openid != ' ') {} else {
				this.modalNames = "DialogModal1"
				return false
			}
		},
		onLoad(option) {
			this.id = option.id;
		},
		onReady() {},
		computed: {
			...mapState(['openid','htp']),
			dishesLens() {
				let num = 0
				return num = this.quantity
			},
			totalPrice() {
				let num = 0
				return num = this.price
			}
		},
		methods: {
			clickImg(img) {
				wx.previewImage({
			
					urls: [img], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
			
					current: '', // 当前显示图片的http链接，默认是第一个
			
					success: function(res) {},
			
					fail: function(res) {},
			
					complete: function(res) {},
			
				})
			
			},
			determine(e) {
				this.modalNames = null
				uni.navigateTo({
					url: '../Login/login'
				})
			},
			cancel(e) {
				this.modalNames = null
				uni.navigateBack({
					delta: 1
				})
			},
			//获取详情
			lists() {
				this.request
					.lists({
						id: this.id
					})
					.then(res => {
						this.details = res;
						this.remaining_quantity = res.def1
					});
			},
			addShoppings(itemType, itemPrice, itemName,itemRange) {
				if (this.remaining_quantity == 0) {
					uni.showModal({
						icon: 'none',
						title: "菜品已售完"
					})
					return false
				}
				// this.itemRange = 
				this.timeType = itemRange
				this.primaryMoney = itemPrice
				this.mealName = itemName
				this.state = 2
				this.consult = 1
				this.addto = false
				this.addShopping()

			},
			addShopping() {
				let state = this.state
				let primaryMoney = this.primaryMoney
				let timeType = this.timeType
				let mealName = this.mealName
				let openId = this.openid;
				let foodId = this.id;
				let number = 1
				let consult = this.consult
				let lists = {
					"primaryMoney": primaryMoney,
					"timeType": timeType,
					"mealName": mealName,
					"state": state,
					"oppenId": openId,
					"foodId": foodId,
					"number": 1,
					"consult": consult
				}
				let list = JSON.stringify(lists)
				this.request.addShop(
					list
				).then(res => {
					this.selectShoppingCat()
				})
				this.modalName = null
			},
			addShoppingNumber(type, numbers) {
				let number = 0;
				if (type == 1) {
					number += 1
				}
				if (type == 2) {
					number -= 1
				}

			},
			shoppingcatData() {
				this.ShoppingCartInformation = null
				this.SinglePoint = null
				if (this.ShoppingCartInformation == null && this.SinglePoint == null) {
					this.quantity = 0
					this.price = 0
					this.addto = true
				}
			},
			//查询购物车
			selectShoppingCat() {
				let openId = this.openid;
				this.request.selectShoppingCat({
					oppenId: openId,
				}).then(res => {
					let length = res.length
					this.ShoppingCartInformation = res
					let quantity = ''
					let price = ''
					let SinglePoint = res.filter((item) => {
						return item.foodIds == this.id
					})
					this.SinglePoint = SinglePoint
					if (this.SinglePoint.length == 0) {
						this.addto = true
					} else {
						this.addto = false
					}
					let quantityst = SinglePoint.map((item) => {
						return item.number
					})
					let pricest = SinglePoint.map((item) => {
						return item.total
					})
					pricest = pricest.toString()
					quantityst = quantityst.toString()
					this.quantity = quantityst
					this.price = pricest
				})
			},
			//删除购物车信息
			remove(id) {
				this.request.remove({
					'ids': id
				}).then(res => {})
			},
			//数量加减
			Less(index, id, ids, itemType, itemPrice, itemName,itemRange, type) {
				if (this.isClick) {
					this.isClick = false;
					setTimeout(() => {
						if (type == 1) {
							this.consult = 2;
							this.foodId = id;
							this.numbers = this.SinglePoint[index].number -= 1;
							var sun = 0;
							this.timeType = itemType
							this.primaryMoney = itemPrice
							this.mealName = itemName
							this.state = 2
							this.addShopping();
							if (this.SinglePoint[index].number < 1) {
								this.remove(ids)
								this.addto = true
								this.quantity = 0
								this.price = 0
							}
						}
						if (type == 2) {
							this.consult = 1;
							var sun = 0;
							this.timeType = itemType
							this.primaryMoney = itemPrice
							this.mealName = itemName
							this.state = 2
							this.foodId = id;
							this.numbers = this.SinglePoint[index].number += 1;
							this.addShopping();
						}
						this.isClick = true;
					}, 150); //150毫秒内不能重复点击
				}

			},
			submits() {
				uni.navigateTo({
					url: '../Order/orders'
				})
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
		margin-bottom: 100rpx;
	}

	.content {
		font-size: 34rpx;
	}

	.cu-btn.lg {
		padding: 0;
		height: 50rpx;
		width: 50rpx;
	}

	.padding {
		padding: 0 15rpx 10rpx 15rpx;
	}

	.padding_box {
		padding: 10rpx;
	}

	.dish_image {
		width: 750rpx;
		height: 480rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.botm {
		z-index: 999;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.textbtn {
		border-radius: 12rpx;
		width: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
	}

	.imgs {
		height: 129rpx;
	}

	.cu-avatar {
		background-color: #ffffff;
	}

	.cart {
		display: table-cell;
		vertical-align: middle;
		z-index: 1000;
		width: 96%;
		position: fixed;
		bottom: 40rpx;
		height: 90rpx;
		line-height: 90rpx;
		background: #f37b1d;
		margin: auto;
		border-radius: 40rpx;
		left: 2%;
	}

	.cart image {
		width: 160rpx;
		position: absolute;
		bottom: 0;
		left: 5%;
	}

	.cu-tag.badge {
		z-index: 1001;
		top: -20rpx;
		right: 530rpx;
	}

	.fontText {
		position: absolute;
		left: 26%;
		font-size: 48rpx;
	}

	.cartBtn {
		z-index: 1000;
		border-radius: 0 39rpx 39rpx 0;
		font-size: 29rpx;
		width: 200rpx;
		background: #39b54a;
		position: absolute;
		right: 0;
		color: #ffffff;
		height: 90rpx;
		line-height: 90rpx;
	}

	.action_text {
		line-height: 50rpx;
	}

	.add:active {
		transform: scale(1.2);
	}

	.textbtn {
		border-radius: 12rpx;
		width: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
	}

	.cu-btn.lg {
		padding: 0;
		height: 50rpx;
		width: 50rpx;
	}

	.action_number {
		display: flex;
		width: 190rpx;
		position: absolute;
		top: 546rpx;
		justify-content: space-around;
		right: 20rpx;
	}

	.action_add {
		position: absolute;
		top: 536rpx;
		right: 20rpx;
	}

	.cu-tag.badge {
		z-index: 1001;
		top: -20rpx;
		right: 530rpx;
	}

	.cutn {
		padding: 10rpx;
		height: 60rpx;
		width: 204rpx;
		border-radius: 10rpx;
		font-size: 15px;
		line-height: 38rpx;
		border-radius: 10rpx;
	}
</style>
